<template>
  <div>
    {{ goodsList }}
    <search-form v-model:form="form" :config="config" @search="search" @reset="handleReset"></search-form>
  </div>


  <van-cell-group inset class="leadSealing" v-for="(item,index) in positionList" :style="index>0? ' margin-top: 20px':''
">
    <van-field
        input-align="right"
        v-model="item.installationPosition"

        is-link
        readonly
        :label="'安装位置'+index"
        placeholder="请选择安装位置"
    />
    <van-field
        v-for="(text,z) in item.leadArr"
        v-model="text.leadSealNum"
        :name="'铅封号'+z"
        :label="'铅封号'+z"
        input-align="right"
        :placeholder="'请输入铅封号'+z"
        :rules="[{ required: true, message: '请输入铅封号'+z }]"
    >
      <template #button>
      <span v-if="item.leadArr.length==1">
              <van-icon name="add-o" size="26" color="#1989fa" v-if="z==0" @click="itemAddFun(index)"/>
      </span>

        <span v-else>
             <van-icon name="close" size="26" color="#1989fa" v-if="z==0" @click="itemDelFun(index,z)"/>
             <van-icon name="add-o" size="26" color="#1989fa" v-if="z>0" @click="itemAddFun(index)"/>
              </span>

      </template>
    </van-field>
    <div align="center" class="delPosition" v-if="index>0" @click="delPositionFun(index)">删除</div>
  </van-cell-group>
  <div align="center" class="addPosition" @click="addPositionFun">添加安装位置
    <van-icon name="plus"/>
  </div>

</template>

<script>
import {
  ref,
  toRefs,

  reactive,
  nextTick
} from "vue";
import {useStore} from "vuex";
import SearchForm from "../../components/SearchFormVue3.vue"

export default {
  name: "vuex",
  components: {
    SearchForm
  },
  setup() {
    const state = reactive({
      form: {
        type: '1',
        text: 1
      },
      config: [
        {
          type: 'select',  // 定义类型
          prop: 'type',   // 字段
          label: '名称',  // label
          placeholder: '请输入',
          options: [
            {label: "选择一", value: "1"},
            {label: "选择二", value: "2"},
          ]
        },
        {
          type: 'select',  // 定义类型
          prop: 'type',   // 字段
          label: '状态',  // label
          placeholder: '请输入',
          options: [
            {label: "选择一", value: "1"},
            {label: "选择二", value: "2"},
          ]
        },
        {
          type: 'select',  // 定义类型
          prop: 'type',   // 字段
          label: '类型',  // label
          placeholder: '请输入',
          options: [
            {label: "选择一", value: "1"},
            {label: "选择二", value: "2"},
          ]
        },
        {
          type: 'select',  // 定义类型
          prop: 'type',   // 字段
          label: '等级',  // label
          placeholder: '请输入',
          options: [
            {label: "选择一", value: "1"},
            {label: "选择二", value: "2"},
          ]
        },
        {
          type: 'select',  // 定义类型
          prop: 'type',   // 字段
          label: '语言',  // label
          placeholder: '请输入',
          options: [
            {label: "选择一", value: "1"},
          ]
        },
        {
          type: 'textarea',
          prop: 'text',
          label: '文本域',
        }
      ]
    })
    const bindfn = {
      search() {
        console.log(state.form);  // 监听查询
      },
      handleReset() {
        console.log(state.form);  // 监听查询 重置
      }
    }


    const store = useStore(); // 使用vuex
    let goodsList = ref([]);

    const addCar = () => { // 添加购物车
      // 调用vuex cart模块mutations中的addToCar方法
      store.commit("cart/addToCar", {
        id: 2,
        title: "临时数据",
        desc: "描述",
        thumb_path: imgUrl,
        sell_price: 12.8,
        count: 10,
        select: false
      })
    }

    const getGoodsList = () => { // 获取购物车数据
      nextTick(() => {
        goodsList.value = store.getters.shopCar;
      });
    }

    getGoodsList();


    let positionList = reactive([
      {
        installationPosition: "name",
        imgurl: ["https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg", "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"],
        leadArr: []
      },
      {
        installationPosition: "name", imgurl: ["https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"],leadArr: [
          {leadSealNum: "1"},
          {leadSealNum: "2"},
        ]
      }, {
        installationPosition: "name", imgurl: ["https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"], leadArr: [
          {leadSealNum: "1"},
          {leadSealNum: "2"},
        ]
      },
    ]);
    const itemDelFun = (index, z) => { //   删除
      positionList[index].leadArr.splice(z, 1)
    }
    const itemAddFun = (index) => { // 获取购物车数据
      positionList[index].leadArr.push({leadSealNum: ""})
    }
    const delPositionFun = (key) => {
      positionList.splice(key, 1)
    };
    const addPositionFun = (key) => {
      positionList.push(
          {
            installationPosition: "name", imgurl: ["https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"], leadArr: [
              {leadSealNum: "1"},
            ]
          },
      )
    };
    return {
      goodsList,
      positionList,
      addCar,
      getGoodsList,
      ...toRefs(state),
      ...bindfn,
      delPositionFun,
      addPositionFun,
      itemDelFun,
      itemAddFun,
    }
  }
}
</script>